<template>
  <div>
    <van-nav-bar left-text="兑换中心" left-arrow @click-left="onClickLeft" />
    <van-tabs v-model="active">
      <van-tab color="#a7d500" title="兑换优惠券">
        <div id="body">
          <input type="text" placeholder="请输入兑换码" />
          <h5>兑换说明</h5>
          <ul>
            <li>
              1.兑换码为一串字母与数字的组合(通常为CSCE/ESCE开头+19位数
              字的兑换码)。
            </li>
            <li>2.输入正确兑换码后即可领取优惠券。</li>
            <li>3..兑换成功后，可在小程序内“我的”－“奈雪券”中查看。</li>
            <li>
              4.礼品卡存在有效期,逾期自动失效,不补发不延期,请在有效期内及时核销。
            </li>
          </ul>
          <h5>使用说明</h5>
          <ul>
            <li>1.兑换码仅限兑换奈雪优惠券,不可兑换现金/找零。</li>
            <li>
              2.同一个兑换码仅限兑换一次，成功兑换后兑换码失效，不可重复兑换使用。
            </li>
            <li>3.优惠券具体使用规则请以优惠券详情为准。</li>
          </ul>
        </div>
        <van-checkbox
          class="check"
          v-model="agree"
          checked-color="#aab84a"
          icon-size="15px"
          >我已阅读并同意<a href="">《礼品卡章程》</a></van-checkbox
        >
        <button @click="btn" :disabled="!agree" :class="{ disabled: !agree }">
          确认兑换
        </button>
      </van-tab>
      <van-tab title="兑换礼品卡">
        <van-tabs v-model="activeName">
          <van-tab title="卡密兑换" name="a">
            <div id="body">
              <input type="text" placeholder="请输入卡号" />
              <input type="text" placeholder="请输入卡密" />
              <h5>兑换说明</h5>
              <ul>
                <li>
                  1.卡号与密码为一串字母与数字的组合（卡号通常为DE开头＋18位数字，密码为10位字符)。
                </li>
                <li>2.输入正确卡号与密码后即可兑换礼品卡。</li>
                <li>3.兑换成功后,可在小程序内“我的”-“礼品卡”中查看。</li>
                <li>
                  4.礼品卡存在有效期,逾期自动失效,不补发不延期,请在有效期内及时使用。
                </li>
              </ul>
              <h5>使用说明</h5>
              <ul>
                <li>1.卡号与密码仅限兑换奈雪礼品卡，不可兑换现金／找零</li>
                <li>
                  2.同一个兑换码仅限兑换一次，成功兑换后兑换码失效，不可重复兑换使用。
                </li>
                <li>3.礼品卡具体使用规则请以礼品卡详情为准。</li>
              </ul>
              <van-checkbox
                class="check check1"
                v-model="agree"
                checked-color="#aab84a"
                icon-size="15px"
                >我已阅读并同意<a href="">《礼品卡章程》</a></van-checkbox
              >
              <button
                @click="btn"
                :disabled="!agree"
                :class="{ disabled: !agree }"
              >
                确认兑换
              </button>
            </div>
          </van-tab>
          <van-tab title="三方码兑换(抖音等)" name="b">
            <div id="body">
              <input type="text" placeholder="请输入兑换码" />
              <h5>兑换说明</h5>
              <ul>
                <li>
                  1.兑换码为一串字母与数字的组合(通常为CSCE/ESCE开头+19位数
                  字的兑换码)。
                </li>
                <li>2.输入正确兑换码后即可领取礼品卡。</li>
                <li>3.兑换成功后,可在小程序内“我的”-“礼品卡”中查看。</li>
                <li>
                  4.礼品卡存在有效期,逾期自动失效,不补发不延期,请在有效期内及时使用。
                </li>
              </ul>
              <h5>使用说明</h5>
              <ul>
                <li>1.兑换码仅限兑换奈雪礼品卡,不可兑换现金/找零。</li>
                <li>
                  2.同一个兑换码仅限兑换一次，成功兑换后兑换码失效，不可重复兑换使用。
                </li>
                <li>3.礼品卡具体使用规则请以礼品卡详情为准。</li>
              </ul>
              <van-checkbox
                class="check"
                v-model="agree"
                checked-color="#aab84a"
                icon-size="15px"
                >我已阅读并同意<a href="">《礼品卡章程》</a></van-checkbox
              >
              <button
                @click="btn"
                :disabled="!agree"
                :class="{ disabled: !agree }"
              >
                确认兑换
              </button>
            </div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      activeName: "a",
      agree: false,
    };
  },
  methods: {
    onClickLeft() {
      this.$router.push("me");
    },
    btn() {
      if (btn) {
        this.$router.push("me");
      }
    },
  },
};
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
::v-deep .van-nav-bar__text {
  color: black;
  font-size: 15px;
  margin: 0.5vh 0 0 2vh;
}
::v-deep .van-icon-arrow-left:before {
  color: black;
}
::v-deep .van-tabs__line {
  background-color: #a7d500;
}
#body #b1 {
  display: flex;
  justify-content: space-around;
  margin: 3vh 4vh 1vh;
}
#body span {
  font-size: 13px;
}
input {
  width: 80%;
  height: 5vh;
  border: 1px solid #c7c7c7;
  padding: 0 2vh;
  margin-top: 2vh;
}
input::-webkit-input-placeholder {
  /* placeholder颜色 */
  color: #aab2bd;
  /* placeholder字体大小 */
  font-size: 12px;
}
h5 {
  margin-left: -40vh;
  margin-top: 3vh;
}
ul {
  list-style: none;
  text-align: left;
  margin: 2vh 4vh;
}
li {
  font-size: 12px;
  margin-bottom: 1vh;
}
.check {
  font-size: 12px;
  margin-left: 12vh;
  margin-top: 15vh;
}
.disabled {
  background: #e0e0e0;
  color: gray;
}
button {
  border-radius: 20px;
  margin-top: 2vh;
  padding: 1vh 18vh;
  border: 0;
  background-color: #a7d500;
}
.check.check1 {
  margin-top: 6vh;
}
</style>